<template>
  <div class="mon">
    <h4>欢迎光临——vue开发的收银系统——水果店</h4>

    <div class="he">
      <div class="item">{{msg}}</div>
      <div class="item">
        请输入您要购买的斤数
        <input type="text" v-model="num">
        </div>
      <div class="item">
        <button @click="btn">结账买单~</button>
      </div>
      <div class="item">结账单：总价：{{zong}}￥元，折后价：{{zhe}}￥元，省了：{{sheng}}￥元</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: '苹果 10 ￥ /斤，折扣<8 折>',
      num: '',
      zong: '',
      zhe: '',
      sheng: ''
    }
  },

  created () {},

  methods: {
    btn () {
      this.zong = this.num * 10
      this.zhe = this.num * 10 * 0.8
      this.sheng = this.zong - this.zhe
    }
  }
}
</script>

<style scoped lang="less">
body {
  margin: 0;
  padding: 0;
}
.mon {
  margin-top: 100px;
  margin-left: 40%;
}
.he {
  width: 600px;
  height: 160px;
  border:1px solid #333;
}
h4 {
  text-align: center;
}
.item {
  height: 35px;
  border: 1px solid #333;
  margin: 2px;
  line-height: 35px;
  text-align: center;
}
</style>
